<template>
  <div class="gantt-chart" v-if="dataList.length">
    <el-table :data="dataList" style="width: 100%">
      <el-table-column label="月份" width="180" align="center">
        <el-table-column label="开始" width="180" align="center">
          <template slot-scope="scope">
            <span>
              {{ `${scope.row.businessTypeName}: ${scope.row.taskName}` }}
            </span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        v-for="(item, i) in columns"
        :key="i"
        :label="item.label"
        align="center"
        header-align="center"
      >
        <el-table-column
          width="50"
          :label="c.toString()"
          v-for="(c, j) in item.children"
          :key="j"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <div
              v-if="isShow(item, c, scope.row)"
              :class="{
                red: scope.row.taskStatus === 1,//任务状态1：进行中
                green: scope.row.taskStatus === 2,//2：已完成
              }"
              :style="{ background: colors[scope.row.taskStatus - 1] }"
            ></div>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    colors: {
      type: Array,
      default () {
        return ['#ff3366', '#00ffee']
      }
    },
    dayInterval: {
      type: Number,
      default () {
        return 3
      }
    }
  },
  watch: {
    dataList () {
    }
  },
  computed: {
    // 最大最小日期
    columns () {
      // 获取任务列表最大最小日期
      if (!this.dataList.length) {
        return false;
      }
      let startDate = ''
      let endDate = ''
      this.dataList.map(item => {
        if (!item.startTime || !item.completionTime) {
          return false;
        }
        let oStartTime = new Date(item.startTime);
        if (!startDate || oStartTime < startDate) {
          startDate = oStartTime;
        }
        let oEndTime = new Date(item.completionTime);
        if (!endDate || oEndTime > endDate) {
          endDate = oEndTime;
        }
      });
      if (!startDate || !endDate) {
        return false;
      }
      // 获取最大最小月份
      let startMonth = startDate.getMonth()
      let endMonth = endDate.getMonth()
      // 获取最大最小年份
      let startYear = startDate.getYear() + 1900
      let endYear = endDate.getYear() + 1900
      // 最大最小日期变为每个月1日和31/30/28/29日
      startDate = new Date(`${startYear}-${startMonth + 1}-01`)
      endDate = new Date(`${endYear}-${endMonth + 1}-${[1, 3, 5, 7, 8, 10, 12].includes(endMonth) ? '31' : endMonth === 2 ? endYear % 4 === 0 ? '29' : '28' : '30'}`)
      let arr = []
      // 获取年份差距
      let year = endYear - startYear
      // 如果不是同一年的数据，做跨年处理
      if (year > 0) {
        endMonth = year * 12 + endMonth
      }
      // 循环处理每个月份及月份当中的区间段
      for (let i = startMonth; i <= endMonth; i++) {
        arr.push({
          label: `${startYear}-${(i % 12 + 1) > 9 ? (i % 12 + 1) : ('0' + (i % 12 + 1))}`,
          children: [3, 6, 9, 12, 15, 18, 21, 24, 27, 30]
        })
        if (i === 11) {
          startYear++
        }
      }
      return arr || [];
    }
  },
  mounted () {
    // this.dataList = [
    //   {
    //     id: 1,
    //     taskName: '开例会',
    //     taskStatus: 1,
    //     startTime: '2021-11-05',
    //     completionTime: '2021-11-15'
    //   },
    //   {
    //     id: 2,
    //     taskName: '阶段一',
    //     taskStatus: 1,
    //     startTime: '2021-11-14',
    //     completionTime: '2021-11-23'
    //   },
    //   {
    //     id: 3,
    //     taskName: '阶段二',
    //     taskStatus: 0,
    //     startTime: '2021-11-26',
    //     completionTime: '2021-12-06'
    //   },
    //   {
    //     id: 4,
    //     taskName: '阶段三',
    //     taskStatus: 0,
    //     startTime: '2021-12-05',
    //     completionTime: '2021-12-15'
    //   },
    //   {
    //     id: 5,
    //     taskName: '阶段四',
    //     taskStatus: 0,
    //     startTime: '2021-12-10',
    //     completionTime: '2021-12-15'
    //   },
    //   {
    //     id: 6,
    //     taskName: '阶段五',
    //     taskStatus: 0,
    //     startTime: '2021-12-18',
    //     completionTime: '2022-01-03'
    //   },
    //   {
    //     id: 7,
    //     taskName: '阶段六',
    //     taskStatus: 0,
    //     startTime: '2022-01-11',
    //     completionTime: '2022-01-23'
    //   }
    // ];
  },
  methods: {
    // 判断当前任务是否在当前时间段内
    isShow (item, c, row) {
      // 时间段开始时间
      let startTime = new Date(item.label + '-' + (c - 2) + ' 00:00:00')
      // 时间段结束时间
      let endTime = new Date(item.label + '-' + (c === 30 ? 31 : c) + ' 23:59:59')
      let result = false
      if (startTime <= new Date(row.startTime) && new Date(row.startTime) <= endTime) {
        result = true
      } else if (startTime <= new Date(row.completionTime) && new Date(row.completionTime) <= endTime) {
        result = true
      } else if (startTime >= new Date(row.startTime) && endTime <= new Date(row.completionTime)) {
        result = true
      }
      return result
    }
  }
}
</script>
<style lang='scss' scoped>
.gantt-chart {
  /deep/.el-table td {
    padding: 0;
    .cell {
      padding: 0;
      .red {
        height: 24px;
        // background: #ff3366;
      }
      .green {
        height: 24px;
        // background:#00ffee;
      }
    }
  }
}
</style>
